<template>
    <view class="page">
        <u-navbar :title="CateTitle" :back-icon-color="'#ffffff'" :title-color="'#ffffff'" :background="background"></u-navbar>
        <!-- 筛选 -->
        <view class="screen-info">
            <view class="screen-list">
                <view class="list" :class="{'action' : screenShow===4}" @click="onSynthesize(4)">
                    <text>综合</text>
                    <!-- <text class="iconfont icon-sanjiao icon_z"></text> -->
                </view>
                <view class="list" :class="{'action' : screenShow===5}" @click="onSynthesize(5)">
                    <text>销量</text>
                    <text></text>
                </view>
               <view class="list" @click="onSynthesize(up,up)">
                    <text :class="{'action0':screenShow===2 || screenShow===3}">价格</text>
                    <view class="icon_j">
                        <text class="iconfont icon-sanjiao up" :class="{'action1':screenShow===2 }"></text>
                        <text class="iconfont icon-sanjiao down" :class="{'action1':screenShow===3 }" @click="onSynthesize(3)"></text>
                    </view>
                </view>
                
                <view class="list">
                    <uni-data-select
                      v-model="value"
                      :localdata="range"
                      @change="onSynthesize"
                      placeholder="请选择产地"
                    ></uni-data-select>
                  </view>

                <!-- <view class="list" v-if="queryParams.producer_type==''|| queryParams.producer_type==0" :class="{'action' : screenShow===5}" @click="onSynthesize(4)">
                    <text>产地中国</text>
                    <text></text>
                </view>
                <view class="list" v-if="queryParams.producer_type==1" :class="{'action' : screenShow===4}" @click="onSynthesize(5)">
                    <text>产地日本</text>
                    <text></text>
                </view> -->
            </view>
        </view>
        <!-- 商品列表 -->
        <z-paging ref="paging" v-model="dataList" @query="getList" :auto-show-back-to-top="true">
            <view class="goods-data">
                <view class="goods-list">
                    <view :class="isList?'list-view' : 'list-li'" v-for="(item,index) in dataList" @click="onGoodsList(item)" :key="index">
                        <view class="thumb">
                            <image :src="item.cover" mode="widthFix"></image>
                        </view>
                        <view class="item">
                            <view class="title">
                                <text class="one-omit">{{item.name}}</text>
                            </view>
                            <!--  <text class="commodity-disc">{{item.disc}}</text> -->
                            <view class="commodity-detail">
                                <view>
                                    <view class="ret-yuans" v-if="item.price_market">¥{{item.price_market}}</view>
                                    <view class="commodity-price">￥{{item.price_selling}}</view>
                                </view>
                                <text class="commodity-count">已售{{item.stock_virtual}}件</text>
                            </view>
                            <!-- <view class="price">
                                <view class="retail-price">
                                    <text class="min">￥</text>
                                    <text class="max">{{item.price}}</text>
                                    <view class="tag" v-if="item.is_goods === 1">
                                        <text>抢购价</text>
                                    </view>
                                </view>
                                <view class="vip-price">
                                    <text class="min">￥</text>
                                    <text class="max">{{item.vip_price}}</text>
                                </view>
                            </view> -->
                        </view>
                    </view>
                </view>
            </view>
        </z-paging>
    </view>
</template>

<script>
import {
    getGoodsLists
} from '@/api/mall.js'
export default {
    data() {
        return {
            queryParams: {
                page: 1,
                limit: 10,
                cate_id: '',
                order: '',
                producer_type: '',
            },
            dataList: [],
            mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
            // 下拉刷新的配置(可选, 绝大部分情况无需配置)
            downOption: {},
            // 上拉加载的配置(可选, 绝大部分情况无需配置)
            upOption: {},
            // 列表视图切换
            isList: true,
            // 筛选弹窗
            // isScreen: false,
            // 筛选切换
            screenShow: 0,
            up: 2,
            // 抽屉
            // isDrawer: false,
            // keyword: '',
            choose: {
                status: 0
            },
            CateId: '',
            CateTitle: '',
            background: {
                // 渐变色
                backgroundImage: 'linear-gradient(to bottom right, #2e996f, #3f99ab)'
            },
            // goodsList: [],
            value: '',
            range: [
                      { value: 100, text: "全部产地" },
                      { value: 0, text: "中国产地" },
                      { value: 1, text: "日本产地" },
                      { value: 99, text: "其他国家" },
                    ],
        }
    },
    onLoad(option) {
        const item = JSON.parse(decodeURIComponent(option.item)); // 解码
        console.log(item, '000')
        this.CateId = item.id ? item.id : ''
        this.CateTitle = item.name
    },
    methods: {
        /**
         * 返回点击
         */
        onBack() {
            uni.navigateBack();
        },
        getList(page) {
            this.queryParams.cate_id = this.CateId
            this.queryParams.page = page
            getGoodsLists(this.queryParams).then(res => {
                  if (res.code == 1){
                      this.dataList = res.data.lists
                      this.$refs.paging.complete(res.data.lists);
                  }
            }).catch(err => {
                this.$refs.paging.complete(false);
            })
        },
        // /*下拉刷新的回调, 有三种处理方式:*/
        // downCallback() {
        //     this.mescroll.endSuccess();
        // },
        // /*上拉加载的回调*/
        // upCallback(page) {
        //     setTimeout(() => {
        //         this.mescroll.endByPage(10, 20);
        //     }, 2000)
        // },
        /**
         * 返回点击
         */
        onBack() {
            uni.navigateBack();
        },
        /**
         * 综合点击
         * @param {Number} type
         */
        onSynthesize(type, up) {
            this.screenShow = type;
            console.log(this.screenShow, "this.screenShow")
            if (this.screenShow == 4) {
                this.queryParams.order = ''
                this.$refs.paging.reload();
            } else if (this.screenShow == 5) {
                this.queryParams.order = 1
                this.$refs.paging.reload();
            } else if (this.screenShow == 2) {
                this.queryParams.order = 2
                this.$refs.paging.reload();
                this.choose.status = 1
                console.log(this.choose.status, 'shengxu')
                //是的话修改标签的status属性
                // this.choose.status = this.choose.status === 1 ? 2 : 1
            } else if (this.screenShow == 3) {
                this.queryParams.order = 3
                this.$refs.paging.reload();
                this.choose.status = 2
                console.log(this.choose.status, 'jiangxu')
            }
            else if (this.screenShow == 0) {
                this.queryParams.producer_type = 0
                this.queryParams.order = ''
                this.$refs.paging.reload();
            } else if (this.screenShow == 1) {
                this.queryParams.producer_type = 1
                this.queryParams.order = ''
                this.$refs.paging.reload();
            } else if (this.screenShow == 99) {
                this.queryParams.producer_type = 99
                this.queryParams.order = ''
                this.$refs.paging.reload();
            }
            else if (this.screenShow == 100) {
                this.queryParams.producer_type = ''
                this.queryParams.order = ''
                this.$refs.paging.reload();
            } 
            if (up) {
                this.up = this.up == 2 ? 3 : 2
            }
        },
        
        change(e) {
                console.log("e:", e);
              },

        /**
         * 商品列表点击
         */
        onGoodsList(item) {
            uni.navigateTo({
                url: '/pagesA/mall/goodsDetails?code=' + encodeURIComponent(item.code) + "&invite=" + uni.getStorageSync(
                            "invite_code") || '',
                // animationType: 'zoom-fade-out',
                // animationDuration: 200
            })
        }
    }
}
</script>

<style scoped lang="scss">
.page {
  //position: absolute;
  //width: 100%;
  //height: 100%;
  //background: #f6f6f6;
  // overflow-x: hidden;
  // overflow-y: auto;
  //padding-bottom: 40rpx;
}

/* 筛选 */
.screen-info {
  position: fixed;
  left: 0;
  z-index: 11;
  /* #ifdef APP-PLUS || H5 */
  top: 150rpx;
  /* #endif */
  width: 100%;
  height: 100rpx;
  background-color: #ffffff;

  .screen-list {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;

    .list {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 24%;
      height: 100%;

      text {
        font-size: 26rpx;
        color: #555555;
      }

      // .icon_z {
      //     font-size: 24rpx;
      //     transform: rotate(90deg) scale(0.7);
      // }

      .icon_j {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 40rpx;
        height: 100%;

        .up {
          transform: rotate(-90deg) scale(0.7);
          margin-bottom: -25rpx;
          //margin-left: 8rpx;
        }

        .action1 {
          color: $base;
        }

        .down {
          transform: rotate(90deg) scale(0.7);
        }
      }

      .action0 {
        color: $base;
      }

      // .icon_s {
      //     font-size: 24rpx;
      //     margin-left: 10rpx;
      //     // transform: scale(0.7);
      // }
    }

    .action {
      text {
        color: $base;
      }
    }
  }

  // 弹出层
  .screen-popup {
    position: fixed;
    left: 0;
    top: 200rpx;
    /* #ifdef APP-PLUS */
    top: 250rpx;
    /* #endif */
    /* #ifdef MP */
    top: 300rpx;
    /* #endif */
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);

    // 综合
    .synthesize {
      padding: 0 20rpx;
      height: 200rpx;
      background-color: #f6f6f6;
      border-radius: 0 0 20rpx 20rpx;

      .list {
        display: flex;
        align-items: center;
        width: 100%;
        height: 80rpx;

        .check {
          display: inline-block;
          width: 20rpx;
          height: 10rpx;
          border-left: 4rpx solid $base;
          border-bottom: 4rpx solid $base;
          border-radius: 4rpx;
          transform: rotate(-45deg);
        }

        .title {
          font-size: 26rpx;
          color: #555555;
          margin-left: 20rpx;
        }
      }
    }
  }
}

// }
/* 商品列表 */

.goods-data {
  /* #ifdef APP-PLUS || MP-WEIXIN */
  margin-top: calc(100rpx + var(--status-bar-height));
  /* #endif */
  // margin-top:180rpx;
  width: 100%;
  .goods-list {
    // padding: 0 25rpx;
    border-radius: 20rpx;
    overflow: hidden;
    padding: 15rpx;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    .list-view {
      // float: left;
      width: 45%;
      padding-bottom: 30rpx;
      // height: 560rpx;
      background-color: #ffffff;
      margin: 0 15rpx 30rpx 15rpx;
      border: 1rpx solid #efefef;
      border-radius: 10rpx;
      // margin-right: 2%;
      // margin-bottom: 30rpx;
      // overflow: hidden;

      .thumb {
       width: 100%;
       //   height: 60%;
       height: 250rpx;
       text-align: center;
       display: flex;
       align-items: center;
       justify-content: center;
       overflow: hidden;
        image {
          height: 250rpx;
        }
      }

      .item {
        width: 100%;

        .title {
          padding: 20rpx;

          text {
            width: 100%;
            color: #212121;
            font-size: 26rpx;
          }
        }

        .commodity-disc {
          border-radius: 4rpx;
          background: #efefef;
          padding: 5rpx 20rpx;
          font-size: 24rpx;
          color: #7f8699;
          text-align: left;
          margin-left: 15rpx;
          margin-top: 9rpx;
        }

        .commodity-detail {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-left: 15rpx;
          width: 300rpx;
          // margin-top: 18rpx;
          .ret-yuans {
            color: #a6a8ae;
            font-size: 28rpx;
            margin-left: 6rpx;
            text-decoration: line-through;
          }
          .commodity-price {
            color: #ff0000;
            font-size: 28rpx;
          }

          .commodity-count {
            color: #999999;
            font-size: 26rpx;
          }
        }

        // .price {
        //     padding: 0 20rpx;
        //     .retail-price {
        //         display: flex;
        //         align-items: flex-end;
        //         width: 100%;
        //         height: 40rpx;
        //         .min {
        //             display: inline-block;
        //             font-size: 24rpx;
        //             color: $base;
        //             font-weight: bold;
        //             transform: scale(0.7);
        //         }
        //         .max {
        //             font-size: 28rpx;
        //             color: $base;
        //             font-weight: bold;
        //         }
        //         .tag {
        //             position: relative;
        //             background-color: $base;
        //             border-radius: 4rpx;
        //             margin-left: 10rpx;
        //             text {
        //                 display: inline-block;
        //                 color: #ffffff;
        //                 font-size: 24rpx;
        //                 transform: scale(0.7);
        //             }
        //         }
        //         .tag:before {
        //             position: absolute;
        //             left: -6rpx;
        //             top: 0;
        //             content: "";
        //             width: 0;
        //             height: 0;
        //             border-top: 0rpx solid transparent;
        //             border-right: 10rpx solid $base;
        //             border-bottom: 6rpx solid transparent;
        //         }
        //     }
        //     .vip-price {
        //         display: flex;
        //         align-items: flex-end;
        //         width: 100%;
        //         height: 40rpx;
        //         .min {
        //             display: inline-block;
        //             font-size: 24rpx;
        //             color: #212121;
        //         }
        //         .max {
        //             font-size: 24rpx;
        //             color: #212121;
        //         }
        //     }
        // }
      }
    }

    .list-view:nth-child(2n) {
      margin-right: 0;
    }

    // 列表
    .list-li {
      display: flex;
      align-items: center;
      width: 100%;
      height: 200rpx;
      background-color: #ffffff;
      border-bottom: 2rpx solid #f6f6f6;

      .thumb {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30%;
        height: 100%;

        image {
          width: 200rpx;
          height: 200rpx;
          border-radius: 10rpx;
        }
      }

      .item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 70%;
        height: 100%;

        .title {
          padding: 0 20rpx 20rpx 20rpx;

          text {
            width: 100%;
            color: #212121;
            font-size: 26rpx;
          }
        }

        .commodity-disc {
          border-radius: 4rpx;
          background: #efefef;
          padding: 5rpx 20rpx;
          font-size: 24rpx;
          color: #7f8699;
          text-align: left;
          margin-left: 15rpx;
          margin-top: 9rpx;
          max-width: 50%;
        }

        .commodity-detail {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-left: 15rpx;
          width: 90%;
          margin-top: 18rpx;

          .commodity-price {
            color: #ff0000;
            font-size: 28rpx;
          }

          .commodity-count {
            color: #999999;
            font-size: 26rpx;
          }
        }

        .price {
          padding: 0 20rpx;

          .retail-price {
            display: flex;
            align-items: flex-end;
            width: 100%;
            height: 40rpx;

            .min {
              display: inline-block;
              font-size: 24rpx;
              color: $base;
              font-weight: bold;
              transform: scale(0.7);
            }

            .max {
              font-size: 28rpx;
              color: $base;
              font-weight: bold;
            }

            .tag {
              position: relative;
              background-color: $base;
              border-radius: 4rpx;
              margin-left: 10rpx;

              text {
                display: inline-block;
                color: #ffffff;
                font-size: 24rpx;
                transform: scale(0.7);
              }
            }

            .tag:before {
              position: absolute;
              left: -6rpx;
              top: 0;
              content: "";
              width: 0;
              height: 0;
              border-top: 0rpx solid transparent;
              border-right: 10rpx solid $base;
              border-bottom: 6rpx solid transparent;
            }
          }

          .vip-price {
            display: flex;
            align-items: flex-end;
            width: 100%;
            height: 40rpx;

            .min {
              display: inline-block;
              font-size: 24rpx;
              color: #212121;
            }

            .max {
              font-size: 24rpx;
              color: #212121;
            }
          }
        }
      }
    }
  }
}

.basis-lg {
  padding-top: 0;
  border-radius: 20rpx 0 0 20rpx;
  flex-basis: 80% !important;

  .serve {
    /* #ifdef APP-PLUS */
    padding-top: 50rpx;
    /* #endif */
    /* #ifdef MP */
    padding-top: 140rpx;
    /* #endif */
    padding-left: 20rpx;
    padding-right: 20rpx;
    background-color: #ffffff;

    .title {
      display: flex;
      align-items: center;
      width: 100%;
      height: 80rpx;

      text {
        color: #212121;
        font-size: 28rpx;
      }
    }

    .serve-list {
      display: flex;
      flex-wrap: wrap;
      padding: 20rpx 0;

      .list {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30%;
        height: 60rpx;
        border-radius: 60rpx;
        margin-right: 4%;
        background-color: #f6f6f6;

        text {
          color: #555555;
          font-size: 24rpx;
        }
      }

      .list:nth-child(3n) {
        margin-right: 0;
      }

      .action {
        background-color: $rgba-03;
        border: 2rpx solid $base;

        text {
          color: $base;
        }
      }
    }
  }

  .price-screen {
    padding: 0 4%;
    background-color: #ffffff;
    margin-top: 20rpx;

    .title {
      display: flex;
      align-items: center;
      width: 100%;
      height: 80rpx;

      text {
        color: #212121;
        font-size: 28rpx;
      }
    }

    .price-section {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 80rpx;

      input {
        width: 180rpx;
        height: 50rpx;
        border-radius: 50rpx;
        font-size: 24rpx;
        color: #555555;
        background-color: #f6f6f6;
      }

      text {
        display: flex;
        width: 60rpx;
        height: 2rpx;
        background-color: #f6f6f6;
        margin: 0 20rpx;
      }
    }
  }

  .operation-btn {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4%;
    width: 100%;
    height: 100rpx;
    background-color: #ffffff;

    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 46%;
      height: 70rpx;
      background-color: #ffffff;
      border: 2rpx solid #f6f6f6;
      border-radius: 70rpx;

      // margin-left: 5%;
      text {
        color: #212121;
        font-size: 26rpx;
      }
    }

    .action {
      background-color: $base;

      text {
        color: #ffffff;
      }
    }
  }
}
/deep/.zp-custom-refresher-view {
  //   z-index: 99999999;
  margin-top: calc(var(--status-bar-height)) !important;
}
</style>